import { XmPullRefresh } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { View } from "@tarojs/components"
import Navbar from "@/components/ui/navbar";
import { BaseRouter } from "@/path/router";
import { getNoticeDetail } from '@/path/api/message/index'
import { Notice } from "@path/api/message/type"
import './index.scss'
function Index() {
  const [message, setMessage] = useState<Notice.Detail>()
  // 获取消息详情
  const msgId: Notice.Id = BaseRouter.getData()
  useEffect(() => {
    getNoticeDetail(msgId).then((res) => {
      setMessage(res.data)
    })
  }, [])
  return <>
    <View className="message-nav">
      <Navbar showIcon={true} titleClassName="message-nav-title" title={'消息详情'} />
    </View>
    <XmPullRefresh className="message">
      <View className="message-box">
        <View className="message-title">
          {message?.title}
        </View>
        <View className="message-time">
          {message?.createTime}
        </View>
        <View className="message-box" dangerouslySetInnerHTML={{ __html: message?.content || "" }}></View>
      </View>
    </XmPullRefresh>
  </>


}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
